<template>
	<view class="container">
		<u-navbar title-size="34" :custom-back="goBack" title="合成活动" back-icon-color="#292940" title-color="#292940" :border-bottom="false" placeholder></u-navbar>
		<view class="content">
			<view class="card-item" v-for="item in list" @click="toCard(item.id)">
				<view class="card-img">
					<image :src="item.cover_url" mode="aspectFill"></image>
				</view>
				 <view class="card-title text-2C2C2C fz-32 font-weight-600">
					{{item.name}}
				</view> 
				<view class="time-box text-999BA8 fz-22 text-right">
					<span>{{item.begin_time.substring(0,16).replace(/\-/g,"/")}}</span>
					<span class="px-1">-</span>
					<span>{{item.end_time.substring(0,16).replace(/\-/g,"/")}}</span>
				</view>
			</view>
			<u-loadmore status="loading" v-show="showLoading" margin-top="50"/>
			<u-empty v-show="list.length === 0 && !showLoading" color="#b5b5b5" src="/static/home/nodata-icon.png" margin-top="50"></u-empty>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				showLoading:false,
				list:[]
			}
		},
		onLoad() {
			this.activityList()
		},
		methods:{
			goBack(){
				uni.switchTab({
					url:'/pages/tabBars/mine'
				})
			},
			activityList(){
				this.showLoading = true
				this.$store.dispatch('public/activityList').then(res=>{
					this.showLoading = false
					this.list = res.data
				}).catch(error=>{
					this.showLoading = false
				})
			},
			toCard(id){
				uni.navigateTo({
					url:`/pages/secondary/card?activity_id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
	}
	.content{
		width: 100%;
		padding: 25upx 30upx;
		box-sizing: border-box;
		.card-item{
			width: 100%;
			height: 578upx;
			background: #FFFFFF;
			box-shadow: 0px 4upx 30upx -12upx rgba(102,105,120,0.2), 0px 4upx 12upx -6upx rgba(154,166,219,0.1);
			border-radius: 16upx;
			padding:24upx 0 0 0;
			margin-bottom: 20upx;
			.card-img{
				width: 642upx;
				height: 428upx;
				border-radius: 8upx;
				margin: 0 auto;
				image{
					width: 642upx;
					height: 428upx;
					border-radius: 8upx;
				}
			}
			.card-title{
				 margin: 0 auto;
				width:642upx;
				line-height: 42upx;
				height: 42upx;
				margin-top: 18upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.time-box{
				margin: 0 auto;
				width:642upx;
				line-height: 56upx;
			}
		}
	}
</style>